<template>
  <!-- 1-4页面组件 -->
  <view>
    <scroll-view
      class="img_box"
      scroll-y
      @scrolltolower="hadlescrolltolower"
      enable-flex
    >
      <view class="item_img" v-for="item in imgList" :key="item.id" @tap="handleClick(item)">
        <image class="img" mode="widthFix" :src="item.img"></image>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  props: {
    urlobj: Object
  },
  /* mountedh只执行一次 */
  mounted() {
    this.getList();
  },
  watch: {
    urlobj() {
      // console.log(this.urlobj);
      this.imgList = [];
      this.getList();
      // console.log(this.urlobj.params.skip);
    }
  },
  data() {
    return {
      imgList: [],
      ifGetList: true
    };
  },
  methods: {
    async getList() {
      const res = await this.http({
        url: this.urlobj.url,
        data: this.urlobj.params
      });
      if (res.data.res.videowp.length === 0) {
        this.ifGetList = false;
        return;
      }
     // console.log(res.data.res);
      this.imgList = [...this.imgList, ...res.data.res.videowp];
      // console.log(this.imgList);
    },
    /* 滚动标签滚动到底部事件 */
    hadlescrolltolower() {
      if (this.ifGetList) {
        this.urlobj.params.skip += this.urlobj.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多数据了",
          icon: "neno"
        });
      }
    },
    /* 图片点击事件 */
    handleClick(item){
        /* 存数据，再跳转 */
        getApp().globalData.video = item
        uni.navigateTo({
            url:"/pages/videoplay/index"
        })
    }

    /*  */
  }
};
</script>
<style lang="less" scoped>
.img_box {
  height: calc(100vh - 40px);
  display: flex;
  flex-wrap: wrap;
  .item_img {
    width: 33.3%;
    border: 3rpx solid #fff;
  }
}
</style>